<template>
  <div class="manage-main">
    <div class="title">
      <span> 项目列表 </span>
      <div class="right-title">
        <n-button secondary @click="addHandle(null)">新增</n-button>
        <div class="search">
          <n-input
            v-model:value="searchText"
            clearable
            class="search-input"
            placeholder="搜索"
          />
        </div>
        <n-icon class="icon-search">
          <IconSearch @click="handleUpdateFilter" />
        </n-icon>
      </div>
    </div>
    <div>
      <n-data-table
        :columns="columns"
        :data="demparentist"
        :row-key="rowKey"
        :default-expand-all="true"
        :loading="loading"
        @update:filters="handleUpdateFilter"
      />
    </div>
    <!-- 新增编辑 -->
    <ProjectManagementEdit
      v-model="visible"
      :edit-data="editData"
      @getList="getProjectList"
    />
  </div>
</template>
<script lang='ts'>
import {
  NButton,
  useDialog,
  NDataTable,
  useMessage,
  DataTableColumns,
  DataTableBaseColumn,
  DataTableFilterState,
} from "naive-ui";
import { IconSearch } from "@/icons";
import { deptApi } from "@/api/system";
import ProjectManagementEdit from "./edit-form.vue";
import { ikTree } from "iking-utils";
type RowData = {
  name: string;
  id: string;
  children?: RowData[];
};
export default defineComponent({
  name: "ProjectManagement",
  components: {
    ProjectManagementEdit,
    NButton,
    NDataTable,
    IconSearch,
  },
  setup() {
    const nMessage = useMessage();
    const nDialog = useDialog();
    const demparentist = ref([]);
    const loading = ref(false);

    const addressColumn = reactive<DataTableBaseColumn<any>>({
      title: "项目名称",
      key: "name",
      filterMultiple: false,
      filterOptionValue: null,
      sorter: "default",
      filter(value, row) {
        return !!~row.name.indexOf(value.toString());
      },
    });

    const columns = [
      {
        title: "项目名称",
        key: "name",
      },
      {
        title: "操作",
        key: "",
        width: 260,
        align: "center",
        render(row) {
          return h("div", {}, [
            h(
              NButton,
              {
                strong: true,
                quaternary: true,
                size: "small",
                onClick: () => {
                  addHandle(row);
                },
              },
              { default: () => "编辑" }
            ),
            h(
              NButton,
              {
                strong: true,
                quaternary: true,
                size: "small",
                type: "warning",
                onClick: () => {
                  deleteProject(row);
                },
              },
              { default: () => "删除" }
            ),
          ]);
        },
      },
      addressColumn,
    ];

    const searchText = ref("");

    const editData = ref({});

    const visible = ref(false);

    // 查询用户
    const getProjectList = async () => {
      try {
        loading.value = true;
        const res = await deptApi.getAllDeps();
        loading.value = false;
        if (res.success) {
          demparentist.value = ikTree.listToTree(res.data || [], {
            sort: "sortOrder",
            needSort: true,
          });
        } else {
          nMessage.error(res.msg);
          demparentist.value = [];
        }
      } catch (error) {
        loading.value = false;
        nMessage.error(error.message);
      }
    };

    // 新增，修改
    const addHandle = (obj: any) => {
      editData.value = { ...obj };
      nextTick(() => {
        visible.value = true;
      });
    };

    // 删除用户
    const deleteProject = (row: any) => {
      const d = nDialog.create({
        title: "确认删除",
        content: `项目【${row.name}】将被删除，无法恢复。确定删除吗？`,
        negativeText: "取消",
        positiveText: "确定",
        showIcon: false,
        onPositiveClick: async () => {
          d.loading = true;
          try {
            const res = await deptApi.deleteDep(row.id);
            if (res.success) getProjectList();
            else nMessage.warning(res.msg);
          } catch (error) {
            nMessage.error(error.message);
          }
        },
      });
    };

    const handleUpdateFilter = (
      filters: DataTableFilterState,
      sourceColumn: DataTableBaseColumn
    ) => {
      addressColumn.filterOptionValue = searchText.value;
      addressColumn.filterOptionValue = filters[sourceColumn.key] as string;
    };

    onMounted(() => {
      getProjectList();
    });

    return {
      searchText,
      demparentist,
      columns,
      rowKey: (row: RowData) => row.id,
      getProjectList,
      addHandle,
      visible,
      editData,
      handleUpdateFilter,
    };
  },
});
</script>
<style lang="scss" scoped>
@import "../style.scss";
</style>

